import 'package:boss/color_constant.dart';
import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/widget/button/outline_radius_button.dart';
import 'package:boss/ui/widget/button/radius_button.dart';
import 'package:hi_common/hi_common.dart';
import 'package:flutter/material.dart';

class ToggleBtnGroup extends StatelessWidget {
  final List<String> btns;
  final ValueChanged<int> onChanged;
  final int selectedIndex;
  final MainAxisAlignment mainAxisAlignment;
  final double spacing;
  final EdgeInsets margin;

  const ToggleBtnGroup({
    Key key,
    @required this.btns,
    this.onChanged,
    this.selectedIndex,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.spacing = 0,
    this.margin,
  })  : assert(selectedIndex < btns.length),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50.w,
      margin: margin,
      child: ListView.builder(
        padding: EdgeInsets.zero,
        physics: BouncingScrollPhysics(),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          var current = btns[index];
          var isSelected = index == selectedIndex;
          var isLast = index == btns.length - 1;

          return Container(
            margin: EdgeInsets.only(
              right: isLast ? 0 : spacing,
            ),
            child: ToggleBtn(
              title: current,
              isSelected: isSelected,
              onTap: () {
                if (onChanged != null) {
                  onChanged(index);
                }
              },
            ),
          );
        },
        itemCount: btns.length,
      ),
    );
  }
}

class ToggleBtn extends StatelessWidget {
  final String title;
  final bool isSelected;
  final VoidCallback onTap;
  final double width;
  final double height;

  const ToggleBtn({
    Key key,
    this.title,
    this.isSelected = false,
    this.onTap,
    this.width,
    this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var width = this.width ?? 120.w;
    var height = this.height ?? 50.w;

    return isSelected
        ? RadiusButton(
            title: title,
            width: width,
            height: height,
            textStyle: TextStyleConstant().white_22,
            onTap: onTap,
          )
        : OutlineRadiusButton(
            title: title,
            width: width,
            height: height,
            textStyle: TextStyleConstant().normal_1_22,
            color: ColorConstant.ffcc,
            onTap: onTap,
          );
  }
}
